<template>
  <el-form :model="form" ref="form" :rules="rules" class="form">
    <el-form-item class="form-item" prop="username">
      <el-input v-model="form.username" placeholder="手机号码"></el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="captcha">
      <el-input v-model="form.captcha" placeholder="验证码">
        <template slot="append">
          <el-button @click="handleSendCaptcha">发送验证码</el-button>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="nickname">
      <el-input v-model="form.nickname" placeholder="昵称"></el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="password">
      <el-input v-model="form.password" placeholder="密码" type="password"></el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="checkPassword">
      <el-input v-model="form.checkPassword" placeholder="确认密码" type="password"></el-input>
    </el-form-item>

    <el-button class="submit" type="primary" @click="handleRegSubmit">注册</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
       // 校验手机号码
        const validateUsername = (rule, value, callback) => {
            // 正常调用（先掌握这个判断）
            if (value === '') {
                callback(new Error('请输入用户名'));
            }else if( !(/^1[3|5|7|8][0-9]{9}/.test(value)) ){
                callback(new Error('手机号码格式错误'));
            }else{
                callback();
            }
        }
    // 自定义校验函数
    // rule这个参数用户上。返回校验规则
    // value 返回输入框的值
    // callback 是回调函数 ，callback是必须要调用的
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("密码输入不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 表单数据
      form: {
        username: "", //登录用户名/手机
        password: "",
        checkPassword: "", //确认密码
        nickname: "", //昵称
        captcha: "" //验证码
      },
      // 表单规则
      rules: {
        username: [// 自定义验证手机号码
          { validator: validateUsername, trigger: "blur" }
        ],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
            // validator是用来指定自定义的验证函数
        checkPassword: [{ validator: validatePass2, trigger: "blur" }],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }]
      }
    };
  },
  methods: {
    // 发送验证码
    async handleSendCaptcha() {
        if(!this.form.username){
            // 错误提示
            this.$message.error('手机号不能为空')
            return ;
        }
        // this.$store.dispatch('user/sendCaptcha',this.form.username).then(code=>{
        //      this.$message.success('模拟手机验证码'+code)
        // })

         // await可以接受promise的返回值
       const code = await this.$store.dispatch('user/sendCaptcha',this.form.username)
       this.$message.success('模拟验证码'+code)

    },

    // 注册
    handleRegSubmit() {
        // 验证通过后
      this.$refs.form.validate(async valid=>{
          if(valid){
      console.log(this.form);
          // 解构, props是除了checkPassword之外剩下的属性
          const {checkPassword,...props} = this.form;
        try {
               //   请求注册接口
        await this.$store.dispatch('user/register',props);

        // 跳转首页
        this.$router.replace('/');

        //弹窗提示
        this.$message.success('注册成功')
        } catch (error) {
            
        }
     
          }
      })
      
    }
  }
};
</script>

<style scoped lang="less">
.form {
  padding: 25px;
}

.form-item {
  margin-bottom: 20px;
}

.form-text {
  font-size: 12px;
  color: #409eff;
  text-align: right;
  line-height: 1;
}

.submit {
  width: 100%;
  margin-top: 10px;
}
</style>